<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    },
    fromType: {
      type: String,
      value: ''
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler (val) {
        console.log(val, 'fromType')
        switch (this.fromType) {
          case 'branch':

            break;
          default:
            this.setDefaultOptions(val)
            break;
        }
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')
      let series = []
      switch (this.fromType) {
        case 'branch': // 分公司工单数量
          series.push(this.setItemStyle(this.chartData.countList, '30%', '热线工单'))
          this.setOptions(series)
          break;
        case 'branchPercent': //
          break;
        default:
          this.setDefaultOptions(this.chartData)
          break;
      }
    },
    setDefaultOptions ({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['expected', 'actual']
        },
        series: [{
          name: 'expected', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
          {
            name: 'actual',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: actualData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
      })
    },
    setOptions (series) {
      this.chart.setOption({
        title: {
          text: this.title,
          subtext: this.subtext,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          orient: series.length > 2 ? 'horizontal' : 'vertical',
          top: 0,
          left: 'center',
        },
        xAxis: {
          type: 'category',
          data: this.chartData.nameList,
          axisTick: {
            alignWithLabel: true,
            interval: 0
          },
          axisLabel: {
            // show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            // rotate: 30, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            // inside: false, // 刻度标签是否朝内，默认朝外
            // margin: 12, // 刻度标签与轴线之间的距离
            // formatter: '{value}' , // 刻度标签的内容格式器
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          containLabel: true
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: series,
        dataZoom: [{
          // 设置滚动条的隐藏与显示
          show: this.chartData.countList.length > 12,
          // 设置滚动条类型
          type: "slider",
          // 设置背景颜色
          backgroundColor: "rgb(19, 63, 100)",
          // 设置选中范围的填充颜色
          fillerColor: "rgb(16, 171, 198)",
          // 设置边框颜色
          borderColor: "rgb(19, 63, 100)",
          // 是否显示detail，即拖拽时候显示详细数值信息
          showDetail: false,
          // 数据窗口范围的起始数值
          startValue: 0,
          // 数据窗口范围的结束数值（一页显示多少条数据）
          endValue: 11,
          // empty：当前数据窗口外的数据，被设置为空。
          // 即不会影响其他轴的数据范围
          filterMode: "empty",
          // 设置滚动条宽度，相对于盒子宽度
          width: "50%",
          // 设置滚动条高度
          height: 8,
          // 设置滚动条显示位置
          left: "center",
          // 是否锁定选择区域（或叫做数据窗口）的大小
          zoomLoxk: true,
          // 控制手柄的尺寸
          handleSize: 0,
          // dataZoom-slider组件离容器下侧的距离
          bottom: 3,
        }, {
          // 没有下面这块的话，只能拖动滚动条，
          // 鼠标滚轮在区域内不能控制外部滚动条
          type: "inside",
          // 滚轮是否触发缩放
          zoomOnMouseWheel: false,
          // 鼠标滚轮触发滚动
          moveOnMouseMove: true,
          moveOnMouseWheel: true,
        }],
      })
    },
    setItemStyle (data, barWidth = '30%', name = '', showLabel = false, labelPosition = 'inside') {
      return {
        name,
        barWidth: barWidth,
        barMaxWidth: '50',
        data: data,
        label: {
          show: showLabel,
          position: labelPosition,
          // fontSize: 13,
        },
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        animationDuration: 2000,
        animationEasing: 'quadraticOut'
      }
    }

  }
}
</script>
